<template>
	<view class="order page">
		<view class="filter">
			<view :key="index" :class="{sel:index==idx}" class="item" v-for="(item,idx) in filters" @click="filter(idx)">
				{{item}}
			</view>
			
		</view>
		
		<view class="order-items">
			<scroll-view @scrolltolower="down" @scrolltoupper="top" style="height: 100%;" class="scroll" scroll-y="true">
			<view @click="toDetail(order.mallOrder.id)" class="order-info" v-for="(order,index) in list " :key="index" >
				<view class="top">
					<image class="img" :src="logo"></image>
					<text class="name">{{name}}</text>
					<text class="status">{{statusOptions[order.mallOrder.orderStatus]}}({{payStatusOptions[order.mallOrder.paid]}})</text>
				</view>
				<view class="items">
					<mall-order-item class="item" :item="item" v-for="(item,idx) in order.mallOrder.items" :key="idx"></mall-order-item>
				</view>
				<view class="total">
					<text class="txt">共{{order.mallOrder.items.length}}件商品 订单金额:</text>
					<text class="price">￥{{order.mallOrder.price}}</text>
					<text class="txt" style="margin-left: 10upx;" v-if="order.mallOrder.pay"> 实际支付:</text>
					<text class="price" v-if="order.mallOrder.pay">￥{{order.mallOrder.pay}}</text>
				</view>
				<view class="btns">
					<view class="btn">查看详情</view>
					<view @click="repay(order.mallOrder.id)" v-if="order.mallOrder.paid==0&&order.mallOrder.orderStatus==0" class="btn">继续支付</view>
				</view>
			</view>
			
		
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import mallOrderItem from '@/components/mall-order-item/mall-order-item.vue'
	import {list,info,repay} from '@/api/order.js'
	import CONFIG from '@/config/index'
	export default {
		components:{
			mallOrderItem
		},
		onShow(){
			if(this.$Route.query.paid!='undefined'){
				this.paid = this.$Route.query.paid
			}
			if(this.$Route.query.status!='undefined'){
				this.status = this.$Route.query.status
			}
			if(this.$Route.query.index!='undefined'){
				this.index = this.$Route.query.index
			}
			this.page = 1
			this.list = []
			this.getList()
		},
		computed:{
			logo(){
				return CONFIG.IMG_HEAD + getApp().globalData.config.logo
			},
			name(){
				return  getApp().globalData.config.name
			}
		},
		methods:{
			top(){
				this.page = 1
				this.goodsList = []
				this.getList()
			},
			down(){
				this.page ++
				this.getList()
			},
			repay(id){
				repay(id).then(res => {
					let ob = JSON.parse(res.data)
					uni.requestPayment({
						success:()=>{
							showCorrect("支付成功").then(res => {
								this.getList()
							})
						},
						...ob
					})
				})
			},
			filter(index){
				this.index = index
				if(index ==0){
					this.status = null
					this.paid = null
				}
				if(index == 1){ //未支付
					this.paid = 0
				}
				if(index == 2){ //已支付 未发货
					this.paid = 1
					this.status = 0
				}
				if(index == 3){ //已支付 已发货
					this.paid = 1
					this.status = 2
				}
				//清空数据 重新获取
				this.list = []
				this.page = 1
				this.getList()
			},
			toDetail(id){
			  this.$Router.push({
				  path:"/pages/mall/order/detail",
				  query:{id}
			  })
			},
			getList(){
				list(this.paid,this.status,this.page,this.limit).then(res => {
					if(this.page == 1){
						this.list = []
					}
					this.list = this.list.concat(res.data)
					// console.log(this.list)
				})
			}
		},
		data() {
			return {
				index:0,
				filters:["全部","未支付","未发货","已发货"],
				page:1,
				limit:8,
				list:[],
				statusOptions:["新订单","配货中","已发货","已取消"],
				payStatusOptions:["未支付","已支付","退款中","已退款"],
				status:null,
				paid:null
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.order
		background-size 100% 150upx
		background-color #EFEFEF
		display flex
		flex-direction column
		.filter
			background-color #A14545
			height 88upx
			display flex
			justify-content space-between
			.item
				display flex
				align-items center
				justify-content center
				font-size 28upx
				flex 1
				color white
				&.sel
					color red
		.order-items
			flex 1
			padding 0 20upx
			overflow hidden
			padding-bottom 20upx
			.order-info
				margin-top 24upx
				border-radius 10upx
				background-color white
				.top
					padding 20upx 20upx
					height 48upx
					display flex
					align-items center
					display flex
					align-items center
					.img
						height 48upx
						width 48upx
						margin-right 12upx
					.name
						flex 1
						color #4E3D07
						font-size 28upx
					.status
						color #F7895E
						font-size 24upx
						
				.items
					padding 0upx 20upx
					display flex
					flex-direction column
					.item
						margin-bottom 19upx
				.total
					display flex
					justify-content flex-end
					margin-bottom 23upx
					padding-right 30upx
					align-items center
					.txt
						color #A1A1A1
						font-size 22upx
					.price
						color red
						font-size 26upx
				.btns
					height 87upx
					display flex
					justify-content flex-end
					align-items center
					border-top 1px solid #DCDCDC
					.btn
						width:130upx;
						height:52upx;
						border:1px solid rgba(111,111,111,1);
						border-radius:26upx;
						font-size 24upx
						margin-right 33upx
						display flex
						align-items center
						justify-content center
						&:first-child
							color #6F6F6F
							border 1px solid #6F6F6F
						&:last-child
							color #F7895E
							border 1px solid #F7895E
					
		
</style>
